<template>
  <!-- 顶部文件统计 / 操作-->
  <div class="top-bar">
    <!-- 文件数量 -->
    <div class="count">
      <span class="text">文件 {{ tableData.length }}</span>
      <template v-if="!tableDataEmpty">
        <el-tooltip placement="bottom">
          <template #content>
            <div v-html="tipText"></div>
          </template>
          <el-icon :size="18" class="icon">
            <QuestionFilled />
          </el-icon>
        </el-tooltip>
      </template>
    </div>
    <div class="action">
      <template v-if="flag === 'file'">
        <el-tooltip content="添加文件" placement="bottom">
          <el-icon :size="24" class="icon" @click="handleAddFile">
            <DocumentAdd theme="outline" fill="#333" />
          </el-icon>
        </el-tooltip>
      </template>
      <el-tooltip content="添加文件夹" placement="bottom">
        <el-icon :size="24" class="icon" @click="handleAddfolder">
          <FolderAdd theme="outline" fill="#333" />
        </el-icon>
      </el-tooltip>
      <el-button
        type="danger"
        :disabled="tableDataEmpty"
        @click="executeFileRename"
      >
        {{ actBtnText }}
      </el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { QuestionFilled, DocumentAdd, FolderAdd } from '@element-plus/icons-vue'
import useFileAction from './hooks/useFileAction'
import useExecuteFileRename from './hooks/useExecuteFileRename'
import { computed } from 'vue'
import useLoadTipText from './hooks/useLoadTipText'

const props = defineProps<{
  tableData: ITableDataItem[]
  // 文件 / 目录标志
  flag: 'file' | 'folder'
  // 开始按钮文字
  actBtnText?: string
}>()

const emits = defineEmits(['add', 'update'])

const tableDataEmpty = computed(() => {
  return props.tableData.length === 0
})

const { tipText } = useLoadTipText()
const { handleAddFile, handleAddfolder } = useFileAction(emits)
const { executeFileRename } = useExecuteFileRename(() => props.tableData, emits)
</script>

<style lang="less" scoped>
.top-bar {
  margin-bottom: 8px;
  padding: 16px;
  padding-bottom: 0;

  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;

  .count {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: bold;

    .text {
      margin-right: 10px;
    }

    .icon {
      color: var(--el-text-color-regular);
      cursor: pointer;
    }
  }

  .action {
    display: flex;
    align-items: center;

    .icon {
      margin-right: 22px;
      cursor: pointer;
    }
  }
}
</style>
